<template>
  <div class="headNav">
    <div :class="topshow ? 'title' : 'title1'" style="padding: 10px 0">
      <!--      <img src="../static/pddweb_home_logo@2x.png" class="icon" v-if="topshow == false"/>-->
      <!--      <img src="../static/pddweb_home_logo_scroll@2x.png" class="icon" v-else/>-->
      <div class="main titleStyle">
        <div class="left">
          <img src="@/static/logo.png" alt="" style="margin-right: 10px" />
          重庆六客会科技有限公司
        </div>
        <div class="right">
          <div
            v-for="(item, i) in mood.toptitle"
            :key="item.label"
            @click.stop="qiehuan(i)"
            :class="cont == i ? 'small' : 'samll1'"
          >
            {{ item.label }}
          </div>
        </div>
      </div>

      <!--      <div class="flx" style="display: flex;">-->
      <!--        <img src="../static/pddweb_home_navbar_phone_icon@2x.png" class="icon1" v-if="topshow == false"/>-->
      <!--        <img src="../static/pddweb_home_navbar_phone_icon_black@2x.png" class="icon1" v-else/>-->
      <!--        <div>19112090902</div>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
import indexdata from "@/pages/inex.data.js";

export default {
  data() {
    return {
      activeName: "second",
      mood: indexdata,
      midtext: indexdata.introduce[0].cont,
      iconts: 0,
    };
  },
  props: {
    topshow: {
      typeof: Boolean,
    },
    cont: {
      typeof: Number,
    },
  },
  mounted() {},
  methods: {
    qiehuan(e) {
      if (e == 0) {
        this.$router.push("/");
      } else if (e == 1) {
        this.$router.push("/product");
      } else if (e == 2) {
        this.$router.push("/introduction");
      }
    },
  },
};
</script>

<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;
}
.icon1 {
  width: 22px;
  margin-right: 4px;
  margin-left: 15px;
}

.icon {
  width: 140px;
}
.titleStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title1 {
  top: 1%;
  position: fixed;
  z-index: 999;
  color: #fff;
  font-size: 18px;
  width: 100%;
}
.title1 .left {
  display: flex;
  position: relative;
  font-size: 20px;
  align-items: center;
}
.title .left {
  display: flex;
  position: relative;
  font-size: 20px;
  align-items: center;
}
.title .right {
  display: flex;
  justify-content: center;
}
.title1 .right {
  display: flex;
  justify-content: center;
}
.az {
  color: #fff;
  outline: none;
  text-decoration: none;
}

.az2 {
  color: #333;
  outline: none;
  text-decoration: none;
}

.az1 {
  color: #5486fe;
  outline: none;
  text-decoration: none;
}

.title {
  position: fixed;
  top: 0%;
  z-index: 999;
  display: flex;
  justify-content: center;
  font-size: 18px;
  align-items: center;
  width: 100%;
  background-color: #ffff;
}

.samll1 {
  padding-bottom: 10px;
  margin: 0 20px;
  cursor: pointer;
}

.small {
  color: #5486fe;
  padding-bottom: 10px;
  border-bottom: #5486fe 3px solid;
  margin: 0 20px;
  cursor: pointer;
}
</style>
